import React, { useState } from "react";
import Dropdown, { type setDownVo, GetActiveValue } from "@/components/mobile/Dropdown"
import { DropdownMenuItemOption } from 'react-vant/es/dropdown-menu/PropsType'
import styles from './StoreSelector.module.scss'
import './StoreSelector.scss'


export type GetSelectedTypes = (params: Pick<StoreSelectorProps, 'shopType' | 'platformType'>) => void
export interface StoreSelectorProps {
    shopType: number,
    platformType: number,
    getSelectedTypes: GetSelectedTypes
}

const StoreSelector: React.FC<StoreSelectorProps> = (props) => {
    const { shopType, platformType, getSelectedTypes } = props

    //   店铺类型 tabs选项卡
    const [storeType, setStoreType] = useState<number>(shopType)
    const handleStoreTypeChange = (type: number) => {
        setStoreType((storeType) => storeType = type)
        getSelectedTypes({ shopType: type, platformType: Number(activeDropdownValue.name) })
    }

    const [activeDropdownValue, setActiveDropdownValue] = useState<setDownVo>({ 'name': platformType })
    const dropdownOption: DropdownMenuItemOption[] = [
        { text: '全部', value: 4 },
        { text: '普通O2O', value: 1 },
        { text: '前置仓', value: 3 },
    ]

    const dropdownOptionChange: GetActiveValue = (params) => {
        setActiveDropdownValue(params)
        getSelectedTypes({ shopType: storeType, platformType: Number(params.name) })
    }


    return <div className={styles['store-tabs-pane-box']}>
        <div className={styles['store-tabs-pane-wrap']}>
            <div className={`${styles['tabs-pane']} ${storeType === 1 ? styles["active"] : ''}`} onClick={() => handleStoreTypeChange(1)}>加盟店</div>
            <div className={`${styles['tabs-pane']} ${storeType === 2 ? styles["active"] : ''}`} onClick={() => handleStoreTypeChange(2)}>直营店</div>
        </div>
        <div className={styles['tabs-search-down']} style={({ "--rv-gray-4": "#666666" }) as React.CSSProperties}>
            <Dropdown activeValue={activeDropdownValue} getActiveValue={dropdownOptionChange} dropdownOption={dropdownOption} />
        </div>
    </div>
}

export default StoreSelector